import React, { useState, useEffect } from "react";
import "../css/Travel.css";
import { Button } from "@nutui/nutui-react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { useLocation } from "react-router-dom";
export default function Travel() {
  const navigate = useNavigate();

  const [list, setList] = useState([]);
  const getlist = async () => {
    const res = await axios.get("http://127.0.0.1:3000/travellist");
    res.data.travelist.forEach(item=>{
      if(item.startDate){
        item.startDate =  new Date(item.startDate).toLocaleDateString()
      }
      if(item.endDate){
        item.endDate =  new Date(item.endDate).toLocaleDateString()
      }
    })
    setList(res.data.travelist);
  
  };
  const delone = async (id) => {
    const res = await axios.post(`http://127.0.0.1:3000/deltravel?id=${id}`);
    if (res.data.code === 200) {
      getlist();
    }
  };
  useEffect(() => {
    getlist();
  }, []);
  const handleAdd = () => {
    navigate("/shou/addtravel");
  };
  const handlelooklist = (t) => {
    navigate("/shou/looklist", { state: t });
  };
  return (
    <div className="bigbox">
      <div className="headerbox">
        <span style={{ fontSize: "20px", lineHeight: "40px" }}>出行</span>
      </div>
      <div className="imgbox">
        <img
          src="https://img2.baidu.com/it/u=1319192750,509649168&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1455"
          alt=""
          style={{ width: "100%", height: "150px" }}
        />
      </div>
      <div className="addbox">
        <div className="addbox_one">
          <h2>我的旅游计划</h2>
          <span style={{ color: "gray", lineHeight: "100%" }}>
            用心探索每一座城市
          </span>
        </div>
        <div className="addbox_two">
          <Button
            style={{
              margin: 8,
              background: "blue",
              width: "120px",
              height: "50px",
              borderRadius: "10px",
            }}
            type="primary"
            shape="square"
            onClick={handleAdd}
          >
            +新增行程
          </Button>
        </div>
      </div>
      <div className="listbox">
        {list.map((t) => (
          <div className="listbox_samll">
            <div className="listbox_header">
              <h3>{t.name}</h3>
              <button
                style={{ color: "red",position:'relative',top:'-34px',right:'-268px',}}
                onClick={delone.bind(null, t._id)}
              >
                删除
              </button>
              <div
                className="listbox_hander_samll"
                onClick={handlelooklist.bind(null, t)}
              >
                <span>地点：{t.city}</span>
                <span style={{marginLeft:'40px'}}>时间：{t.startDate}</span>~<span>{t.endDate}</span>
              </div>
              <span style={{fontSize:'10px'}}>出行工具：{t.tool}</span>
              <div className="listbox_text">
                <span>备注：{t.description}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
